<template>
  <van-collapse
    v-show="visible"
    v-model="activeName"
    class="overlayCollapse"
    accordion
    @change="handleChange">
    <van-collapse-item v-for="(item, index) in list" :key="index" :title="item.name" :name="index" class="list-item">
      <div v-if="item.dictionaryVoList.length > 0" class="children-item">
        <collapse :list="item.dictionaryVoList"/>
      </div>
      <van-cell
        v-else
        :title="item.name | ellipsis(10)"
        class="van-ellipsis"
        is-link
        @click="jump(item.id)"
      />

    </van-collapse-item>
  </van-collapse>
</template>

<script>
import { getPolicyInfoById } from './../../../api/article'
export default {
  name: 'Collapse',
  props: {
    list: {
      type: Array,
      require: true,
      default: () => []
    },
    visible: {
      type: Boolean,
      require: true,
      default: true
    }
  },
  data() {
    return {
      activeName: ''
    }
  },
  methods: {
    handleChange(activeName) {
      this.activeName = activeName
    },

    async jump(id) {
      const result = await getPolicyInfoById({ id })
      console.log(result)
      if (id) {
        this.sourceData = '<p>888</p>id'
        this.visible = false
      }
      this.$router.replace({ path: 'regulations-details', query: { id }}).catch(err => err)
    }
  }
}
</script>

<style scoped lang="less" rel="stylesheet/less">

.overlayCollapse {

}

</style>
